import React, { ReactNode } from 'react'
import { Input, Select, Button } from 'antd'
import { BaseListPage, IBaseListPageProps, IBaseListPageState, columnRenders, columnActions, validators } from '../../../lib'

const Option = Select.Option

class RepairList extends BaseListPage<IRepairListProps, IRepairListState> {

  constructor(props: IRepairListProps) {
    super(props)

    this.state = {
      title: '查修列表',
      queryApi: '/fix/page',
      conditions: [
        { id: 'applyNo', label: '申请单号' },
        {
          id: 'type', label: '查修类型', initialValue: 'FIX_CODE',
          render: <Select>
            <Option value={'FIX_CODE'}>更换二维码查修</Option>
            <Option value={'FIX_PRODUCT'}>更换商品编码查修</Option>
            <Option value={'FIX_LOCATION'}>更换库存地查修</Option>
          </Select>
        },
        {
          id: 'source', label: '来源',
          render: <Select>
            <Option value={'POS'}>门店收银系统</Option>
            <Option value={'WMS'}>仓储管理系统</Option>
            <Option value={'GBCK'}>隔壁仓库</Option>
          </Select>
        },
        { id: 'applyShipperName', label: '申请货主名称' },
        { id: 'applyLocation', label: '申请库存地名称', rules: [validators.notContainEmoji, validators.noSpecialSymbol] },
        {
          id: 'auditStatus', label: '审核状态',
          render: <Select>
            <Option value={'IN_REVIEW'}>待审核</Option>
            <Option value={'APPROVED'}>通过</Option>
            <Option value={'REJECTED'}>拒绝</Option>
          </Select>
        }
      ],
      rowKey: 'fixNo',
      columns: [
        { title: '申请单号', dataIndex: 'fixNo' },
        {
          title: '操作类型', dataIndex: 'fixSource', minWidth: '120px',
          render: text => {
            const translate = {
              TAKE_STOCK: '盘点',
              MANPOWER: '人工'
            }
            return translate[text] ? translate[text] : '--'
          }
        },
        {
          title: '查修类型',
          dataIndex: 'type',
          minWidth: '120px',
          render: text => {
            const translate = {
              FIX_CODE: '更换二维码查修',
              FIX_PRODUCT: '更换商品编码查修',
              FIX_LOCATION: '更换库存地查修',
              ALL: '全部来源'
            }
            return translate[text] ? translate[text] : '--'
          }
        },
        {
          title: '数量',
          dataIndex: 'quantity',
          minWidth: '80px',
        },
        {
          title: '来源',
          dataIndex: 'source',
          minWidth: '120px',
          render: text => {
            const translate = {
              POS: '门店收银系统',
              WMS: '仓储管理系统',
              SRM: '供应商管理系统',
              GBCK: '隔壁仓库',
              JMM: '玖妈妈',
            }
            return translate[text] ? translate[text] : '--'
          }
        },
        {
          title: '申请货主名称',
          dataIndex: 'currentShipperName',
          minWidth: '220px'
        },
        { title: '申请库存地名称', dataIndex: 'currentStorageName', minWidth: '220px' },
        {
          title: '申请人ID',
          dataIndex: 'optId',
          minWidth: '120px'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          minWidth: '120px',
        },
        {
          title: '测试开关',
          dataIndex: 'test',
          fixedWidth: '50px',
          align: 'center',
          render: columnRenders.switch()
        },
        {
          title: '状态',
          dataIndex: 'auditStatus',
          fixedWidth: '36px',
          style: { color: '#f60' },
          align: 'center',
          render: text => {
            const translate = {
              IN_REVIEW: '待审核',
              APPROVED: '通过',
              REJECTED: '拒绝'
            };
            const translateColor = {
              REJECTED: 'color-red',
              IN_REVIEW: '',
              APPROVED: ''
            }
            let result: ReactNode
            result = (<span className={translateColor[text]}>{translate[text]}</span>)
            return translate[text] ? result : '--'
          }
        },
        {
          title: '操作',
          dataIndex: 'operate',
          fixedWidth: '28px',
          // fixed: 'right',
          render: columnRenders.operate([
            { title: '详情', action: columnActions.go('/repair-detail/${fixNo}') }
          ])
        }
      ],
      tableProps: {
        // scroll: { x: '1900px' }
      },
      leftBtns: [
        () => {
          return <Button disabled={!this.existSelectedRow()} onClick={this.del}>批量删除</Button>
        }
      ],
      rightBtns: []
    }
  }

  private del = () => {
    console.log(this.state.selectedRowKeys)
  }

}

interface IRepairListProps extends IBaseListPageProps {

}

interface IRepairListState extends IBaseListPageState {

}

export default RepairList
